Para aprender sobre Material Design, consulte MaterializeCSS.com.
De acordo com [Materializecss.com], "Criado e projetado pelo Google, o Material Design é uma linguagem de design que combina os princípios clássicos do design bem-sucedido, além de inovação e tecnologia. O objetivo do Google é desenvolver um sistema de design que permita uma experiência unificada do usuário em todos os seus produtos em qualquer plataforma".
| Treinaweb | |||
|---|---|---|---|
| Vantagens | Desvantagens | ||
| Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções; | Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples. |
Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
Documentação: possui uma documentação bem completa e acessível;b
Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código. |
Acesse: Getbootstrap e copie de CDN via jsDelivr e cole nos respectivos locais do código:
Adicione no head abaixo da tag title e antes de seu link para o arquivo css:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
body: <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Bootstrap é o mais popular framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web. <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!-- CDN via jsDelivr -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- CDN via jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>
.container: para conteúdo responsivo com largura limitada. .container-{breakpoint}: para largura de 100% para o breakpoint especificado..container-fluid: para conteúdo responsivo com largura fluída, isto é, toda a largura da janela. .container (largura fixa) ou .container-fluid (largura cheia) para alinhamento e padding adequado. <!-- Exemplo de uso de container padrão -->
<div class="container">
<!-- Content here -->
</div>
<!-- Exemplos de containers responsivos -->
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
<!-- Exemplo de container fluido -->
<div class="container-fluid">
...
</div>
 |
| Fonte: https://getbootstrap.com/docs/5.3/layout/breakpoints/#media-queries |
/***************/
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }
/***************/
/* Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint */
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
/***************/
/* Example: Style from medium breakpoint and down (máximo) */
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
@media (min-width: 768px) and (max-width: 991.98px) { ... }
@include media-breakpoint-between(md, xl) { ... }
/* É o mesmo que: */
/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Opções de GRID:
 |
| Fonte: https://getbootstrap.com/docs/5.3/layout/grid/ |
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Media Queries</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> Teste de cores com Media Queries </h1>
<div class="pvw-title"><span>Tamanho Mínimo</span></div>
</body>
</html>
/* arquivo css*/
@media (max-width: 768px) {
body {
color: darkorchid;
background-color: darkgrey;
}
.pvw-title span {
display: none;
}
.pvw-title:after {
font-weight: bold;
content: 'Máximo: 768px.';
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
color: wheat;
background-color: #0f0f0f;
}
.pvw-title span {
display: none;
}
.pvw-title:after {
font-weight: bold;
content: 'Mínimo: 768px e Máximo: 992px.';
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
body {
color: darkred;
background-color: lightpink;
}
.pvw-title span {
display: none;
}
.pvw-title:after {
font-weight: bold;
content: 'Mínimo: 992px e Máximo: 1200px.';
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body {
color: white;
background-color: darkolivegreen;
}
.pvw-title span {
display: none;
}
.pvw-title:after {
font-weight: bold;
content: 'Mínimo 1200px.';
}
}
Saída:
 |
 |
 |
 |
| Fonte: Autoria própria |
São três vantagens para animações CSS:
Para criar uma sequência de animação CSS, utilizaremos a propriedade animation e outras, o que permitirá a configuração da sincronização da animação, a sequencia de como progredir.
animation¶Valores iniciais para as propriedades de animation:
Sintaxe:
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation : 3s ease-in 1s 2 reverse both paused slidein ;
/* @keyframes duration | timing-function | delay | name */
animation : 3s linear 1s slidein ;
/* @keyframes duration | name */
animation : 3s slidein ;
animation¶E leia o artigo do CSS-Tricks Animation.
animation-name: Especifica o nome da regra @keyframes < nomeRegra > descrevendo os keyframes da animação.
animation¶<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="estilo.css" />
<title>Static Template</title>
</head>
<body>
<div></div>
</body>
</html>
/* Arquivo estilo.css */
div {
/* animation properties */
animation-name: my-animation;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* other properties */
width: 300px;
height: 100px;
border-radius: 10px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@keyframes my-animation {
from {
background-color: #ff7a59;
width: 300px;
top: 10px;
}
to {
background-color: #33475b;
width: 50px;
top: 100px;
}
}
transition¶transition: permite definir a transição entre dois estados de um elemento. Valores iniciais para a propriedade de transition:
Sintaxe:
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay / */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition : inherit;
transition : initial;
transition : unset;
transition¶transition¶<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="estilo.css" />
<title>Static Template</title>
</head>
<body>
<button class="btn">
Hello World
</button>
</body>
</html>
/* Arquivo estilo.css */
.btn {
will-change: transform;
transition: transform 450ms;
}
.btn:hover {
transition: transform 125ms;
transform: translateY(-10px);
}
.btn {
width: 100px;
height: 100px;
border-radius: 50%;
border: none;
background: slateblue;
color: white;
font-size: 20px;
font-weight: 500;
line-height: 1;
}
transform¶transform¶<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="estilo.css" />
<title>Static Template</title>
</head>
<body>
<h1>Hover Me</h1>
</body>
</html>
/* Arquivo estilo.css */
h1::before {
transform: scaleX(0);
transform-origin: bottom right;
}
h1:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
h1::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%);
z-index: -1;
transition: transform .3s ease;
}
h1 {
position: relative;
font-size: 5rem;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
}
@media (orientation: landscape) {
body {
grid-auto-flow: column;
}
}
transform¶<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="estilo.css" />
<title>Static Template</title>
</head>
<body>
<div>
<h2 id="animation">CSS3: Animação e Transições</h2>
</div>
<div>
<div class="box slideright">Slider box</div>
<div class="box rotate">Rotate box</div>
<div class="box rounding">Round box</div>
<div class="box scale">Scaling box</div>
<div class="box color">Color box</div>
<div class="box skew">skew box</div>
</div>
</body>
</html>
/* estilo.css */
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h2 {
padding: 10px;
border-radius: 50%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.box {
float: left;
margin: 20px;
width: 100px;
height: 60px;
border: 2px solid white;
box-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
border-radius: 5px;
line-height: 60px;
text-align: center;
transition: all 1s ease-in-out;
}
.slideright:hover {
transform: translate(3em, 0);
}
.rotate:hover {
transform: rotate(45deg);
}
.rounding:hover {
border-radius: 100px;
}
.scale:hover {
transform: scale(2);
}
.color:hover {
background: darkblue;
color: white;
}
.skew:hover {
transform: scale(1) skewX(10deg) skewY(10deg);
transform: scale(1) skewX(10deg) skewY(10deg);
transform-origin: 0% 0%;
}
Saída:
 |
 |
 |
 |
 |
 |
 |
| Fonte: Autoria própria |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animações com keyframes</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<section>
<h1>Exemplo animação - efeito girar</h1>
<div class="giragira"></div>
</section>
<section>
<h1>Exemplo animação - efeito subir e descer</h1>
<div class="vaivolta"></div>
</section>
<section>
<h1>Exemplo animação - efeito pendulo</h1>
<div class="pendulo"></div>
</section>
</body>
</html>
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
section {
margin: 10px auto;
padding: 2em;
border-radius: 0.8em;
width: 80%;
height: 300px;
}
h1 {
padding: 10px;
border-radius: 50%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
@keyframes rodaroda {
0% {
transform: rotate(0deg);
}
50% {
background-color: red;
transform: rotate(180deg);
border-radius: 2em;
}
100% {
background-color: blue;
transform: rotate(360deg);
border-radius: 50%;
}
}
@keyframes vaivolta {
0% {
top: 520px;
}
50% {
top: 560px;
}
100% {
top: 580px;
border-radius: 40px;
background-color: yellow;
}
}
@keyframes pendulo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(95deg);
}
}
.giragira {
width: 150px;
height: 150px;
margin: 10px auto 45px;
background-color: black;
animation: rodaroda 0.2s linear infinite;
}
.vaivolta {
width: 150px;
height: 150px;
margin: 10px auto 0;
background-color: blue;
position: absolute;
left: 50%;
animation: vaivolta 1s alternate linear infinite;
}
.pendulo {
width: 150px;
height: 150px;
margin: 35px auto 0;
background-color: green;
animation: pendulo 1s alternate linear infinite;
}
 |
 |
 |
| Fonte: Autoria própria |
Existem 3 formas de permitir a leitura de um conteúdo incorporado em um documento Web:
Microdatas:
Diferentes usos:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>example code using Microdata</title>
</head>
<body>
<section itemscope itemtype="http://schema.org/Book">
<h1 itemprop="name">The Jungle Book</h1>
<span>Author: <span itemprop="author">Rudyard Kipling</span></span>
<span>Category : <span itemprop="genre">children's literature</span></span>
<a href="http://en.wikipedia.org/wiki/The_Jungle_Book"><span itemprop="detail">Detail info</span></a>
</section>
</body>
</html>
Mais sobre Imagens.
Para conhecimento, leia o artigo na CSS-Tricks: Um guia para a sintaxe de imagens responsivas em HTML.
Para escolher seu Emoji, consulte Full Emoji List, v13.0.
Exemplo:
<p>🙌 🤲 🧛 🧝 🧞 💇</p>
Saída:
ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.